import React, { useCallback, useState, useEffect } from 'react';
import HeaderBar from '../../components/headerBar/index'
import Nav from './components/nav'
import { connect } from 'react-redux'
import { actions } from './module'
import SwitchCom from './components/switch'
import SearchBtn from './components/searchBtn'

interface IProps {
  history?: any;
  dispatch?: any;
  // index: { from: string, to: string },
  from: string;
  to: string;
  // cityList:any[]
}

const Index: React.FC<IProps> = (props) => {
  const {
    // index: {
    //   from, to
    // },
    from,
    to,
    dispatch,
    // cityList
  } = props;

  const onBack = useCallback(() => {
    props.history.goBack()
  }, [])

  const changeFromTo = useCallback(() => {
    // setCity({ from, to: city.from })
    const action = (actions as any).changeFromTo({ from, to })
    dispatch(action)
  }, [from, to])

  const toFloor = useCallback((dir) => {
    props.history.push(`/select?dir=${dir}`)
  }, [])

  // proxy: http: xxx;
  useEffect(() => {
    const action = actions.getCityData()
    dispatch(action)
  }, [])

  const switchClick = useCallback((flag: boolean) => {
    console.log("flag, ", flag)
    dispatch(actions.setSwitchFlag(flag))
  }, [])

  const toQuery = useCallback(() => {
    props.history.push('/query')
  }, [])

  return <div>
    <HeaderBar
      children="火车票"
      onBack={onBack}
    />

    <Nav
      from={from}
      to={to}
      changeFromTo={changeFromTo}
      toFloor={toFloor}
    />

    <SwitchCom
      switchClick={(flag: boolean) => switchClick(flag)}
    />

    <SearchBtn
      toQuery={toQuery}
    />

  </div>
}

// connect中回调函数中的return回产生什么效果？

export default connect((state: any) => {
  console.log("state:", state)
  return { ...state.index }
}, (dispatch) => {
  return { dispatch }
})(Index)